<template>
	<div class="login">
		<div class="login-box">
			<pre class="name-box">CPSC  AI</pre>
			<el-card style="width: 400px;" shadow="always">
				<div class="login-name">欢迎来到CPSC人工智能平台</div>
				<el-form :model="loginForm" :rules="rules" ref="loginFormRef">
					<el-form-item prop="username" required>
						<el-input v-model="loginForm.username" :prefix-icon="User" placeholder="登录账号"
							@keydown.enter="focusPassword"></el-input>
					</el-form-item>
					<el-form-item prop="password" required>
						<el-input type="password" ref="passwordInputRef" v-model="loginForm.password" :prefix-icon="Lock" placeholder="密码"
							@keydown.enter="handleLogin"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleLogin">登录</el-button>
					</el-form-item>
				</el-form>
			</el-card>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { User, Lock } from "@element-plus/icons-vue";
import AuthAPI from "@/api/userManage/userManage";
import UserManage from "@/api/userManage/userManage";

import { type LoginData } from "@/api/auth/types";

import router from "@/router";

const loginForm = reactive({
	username: '',
	password: ''
});

const rules = {
	username: [
		{ required: true, message: '请输入登录账号', trigger: 'blur' }
	],
	password: [
		{ required: true, message: '请输入密码', trigger: 'blur' }
	]
};

const loginFormRef = ref();
const passwordInputRef = ref();

const focusPassword = () => {
	passwordInputRef.value.focus();
};

const handleLogin = () => {
	loginFormRef.value.validate((valid: boolean) => {
		if (valid) {
			const loginData = ref<LoginData>({
				account: loginForm.username,
				pwd: loginForm.password
			});
			AuthAPI.getUesrLogin(loginData.value).then(res => {
				// console.log(loginForm,"loginForm");
				UserManage.getUser(res.data, '0').then(ret => {
					// console.log(ret.data,"data");
					localStorage.setItem('userInfo', JSON.stringify(ret.data));
				})
				localStorage.setItem('accessToken', `${res.data}`);
				ElMessage.success("登录成功");
				router.replace({ path: "/" });
			})
		} else {
			ElMessage.error("请填写完整的账号和密码");
		}
	});
};


</script>

<style scoped>
* {
	margin: 0;
	padding: 0;
}

.login {
	display: flex;
	height: 100vh;
	background:
		url(/images/bg_wave.png) 100% / cover no-repeat,
		url(/images/bg_ball.png) 20% 58% / 35% no-repeat,
		linear-gradient(to bottom, #3E0EB0, #2986ED);
}

.login-box {
	display: flex;
	width: 100%;
	height: 100%;
	position: relative;

}

.el-card {
	position: absolute;
	right: 20%;
	top: 30%;
	height: 350px;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 5px 5px 5px rgba(255, 255, 255, 0.3);
}

.name-box {
	font-size: 30px;
	color: #fff;
	position: absolute;
	left: 18%;
	top: 28%;
	font-weight: bold;
	font-style: italic;
	font-family: emoji;
}

.el-input i {
	font-size: 18px !important;
}

.el-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.login-name {
	text-align: center;
	margin-bottom: 30px;
	font-weight: bold;
	font-size: 20px;
}

.el-form-item:not(:last-child) {
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.el-input {
	height: 45px;
	width: 280px;
}

.el-button {
	width: 280px;
	height: 50px;
	margin-top: 20px;
}

/* 改变input前面的图标大小 ，这个有效果 */
:deep .el-input__prefix-inner .el-input__icon {
	font-size: 17px;
}
</style>